<template>
  <div>
    <template>
      <el-button type="primary"
        class="btn"
        @click="dialogFormVisible = true">新 增</el-button>
      <el-table
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: 100%">
        <el-table-column
          prop="Order"
          label="顺序"
          sortable
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="Photo"
          label="照片"
          width="150">
          <template width="90" slot-scope="scope">
          <img style="width:80px;height:80px;border:none;" :src="scope.row.Photo">

          </template>
        </el-table-column>
        <el-table-column
          prop="Name"
          label="姓名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="Title"
          label="职称"
          width="150">
        </el-table-column>
        <el-table-column
          prop="Identity"
          label="身份"
          width="150"
          :filters="[{ text: '教师', value: '教师' },
          { text: '博士', value: '博士' },
          { text: '硕士', value: '硕士' },
          { text: '本科生', value: '本科生' },
          { text: '毕业生', value: '毕业生' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.Identity === '教师' ? 'primary' : (scope.row.Identity ==='博士'?'success':(scope.row.Identity ==='硕士'?'info':(scope.row.Identity ==='本科生'?'warning':'danger')))"
              disable-transitions>{{scope.row.Identity}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" >
          <template slot-scope="scope" >
            <div style="margin-bottom:8px;float:left">
              <el-button  style="display: block;margin-bottom:8px"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑基本信息</el-button>
              <el-button style="display: block;margin-left:0"
              size="mini"
              @click="pushrouter2(scope.$index, scope.row)">编辑个人主页</el-button>
            </div>
            <el-button style="float:left;margin:15px 15px"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 新增信息 -->
    <div>
      <el-dialog title="添加成员信息" :visible.sync="dialogFormVisible" @close="resetAddForm">
        <el-form inline="true" :model="Form" :rules="rules" ref="addform" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input style="width:260px" v-model="Form.name" placeholder="请输入成员姓名"></el-input>
        </el-form-item>
        <el-form-item class="photo"  prop="photo">
          <el-upload :class="{hide:hideUpload}"
            ref="photo"
            action="#"
            :limit="1"
            :file-list="imgList"
            :on-remove="handleRemove"
            :on-change="onchange"
            :on-preview="handlePictureCardPreview"
            list-type="picture-card"
            accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG,"
            :auto-upload="false">
            <!-- <img v-if="Visible" :src="coverPic" class="avatar" /> -->
            <i  slot="default" class="el-icon-upload"></i>
            <!-- <div slot="file" slot-scope="{file}">
               <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                ></div> -->
              <!-- <i v-show="!dialogImageUrl"  class="el-icon-upload avatar-uploader-icon"></i>
              <div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">上传照片</div> -->
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
         <el-form-item class="identity" label="身份" prop="identity">
          <el-select style="width:260px" v-model="Form.identity" placeholder="请选择成员身份">
            <el-option label="教师" value="教师"></el-option>
            <el-option label="博士" value="博士"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="本科生" value="本科生"></el-option>
            <el-option label="毕业生" value="毕业生"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="title" label="职称" prop="title">
          <el-select style="width:260px" v-model="Form.title" placeholder="请选择成员职称">
            <el-option label="教授" value="教授"></el-option>
            <el-option label="副教授" value="副教授"></el-option>
            <el-option label="讲师" value="讲师"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input style="width:260px" v-model="Form.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input style="width:260px" v-model="Form.email"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input style="width:260px" v-model="Form.address"></el-input>
        </el-form-item>
        <el-form-item label="顺序" prop="order">
          <el-input style="width:260px" v-model="Form.order"></el-input>
        </el-form-item>
        <el-form-item label="研究方向" prop="yjfx">
          <el-input style="width:510px"  type="textarea" v-model="Form.yjfx"></el-input>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="savecreate2();">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 修改信息 -->
    <div>
      <el-dialog title="修改成员信息" :visible.sync="dialogForm2Visible" @close="resetEditForm">
        <el-form inline="true" :model="Form2" :rules="rules" ref="editform" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input style="width:260px" v-model="Form2.name" placeholder="请输入成员姓名"></el-input>
        </el-form-item>
        <el-form-item class="photo"  prop="photo">
          <el-upload :class="{hide:hideUpload}"
          v-model="Form2.photo"
            ref="photo"
            action="#"
            :limit="1"
            :file-list="imgList"
            :on-remove="handleRemove"
            :on-change="onchange"
            :on-preview="handlePictureCardPreview"
            list-type="picture-card"
            :auto-upload="false">
            <!-- <img
                  class="avatar"
                  v-if="testurl"
                  :src="testurl" alt=""
                > -->
           <i slot="default" class="el-icon-upload"></i>
            <!-- <div slot="file" slot-scope="{file}">
              </div> -->
              <!-- <i v-show="!dialogImageUrl"  class="el-icon-upload avatar-uploader-icon"></i>
              <div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">上传照片</div> -->
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
         <el-form-item class="identity" label="身份" prop="identity">
          <el-select style="width:260px" v-model="Form2.identity" placeholder="请选择成员身份">
            <el-option label="教师" value="教师"></el-option>
            <el-option label="博士" value="博士"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="本科生" value="本科生"></el-option>
            <el-option label="毕业生" value="毕业生"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="title" label="职称" prop="title">
          <el-select style="width:260px" v-model="Form2.title" placeholder="请选择成员职称">
            <el-option label="教授" value="教授"></el-option>
            <el-option label="副教授" value="副教授"></el-option>
            <el-option label="讲师" value="讲师"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input style="width:260px" v-model="Form2.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input style="width:260px" v-model="Form2.email"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input style="width:260px" v-model="Form2.address"></el-input>
        </el-form-item>
        <el-form-item label="顺序" prop="order">
          <el-input style="width:260px" v-model="Form2.order"></el-input>
        </el-form-item>
        <el-form-item label="研究方向" prop="yjfx">
          <el-input style="width:510px"  type="textarea" v-model="Form2.yjfx"></el-input>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogForm2Visible = false">取 消</el-button>
          <el-button type="primary" @click="saveedit()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="page">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      background
      layout="prev, pager, next"
      :total="tableData.length">
    </el-pagination>
    </div>
  </div>

</template>

<script>
export default {
  name: "filterTable",
  data () {
    var checkNumber = (rule, value, callback) => {
      let regEn = /^-?[0-9]+(.[0-9]+)?\d*$/
      if (!regEn.test(value)) {
        callback(new Error("请填写实数"))
      } else {
        callback()
      }
    }
    return {
      currentPage: 1, // 初始页
      pagesize: 10, //    每页的数据
      imgList: [],
      testurl: "",
      tableData: [],
      dialogImageUrl: "",
      dialogVisible: false,
      Visible: false,
      coverPic: "",
      disabled: false,
      hideUpload: false,
      limitCount: 1,
      dialogFormVisible: false,
      dialogForm2Visible: false,
      formLabelWidth: "120px",
      memberid: "",
      membername: "",
      introducemd: "请输入...",
      kycgmd: "请输入...",
      kyxmmd: "请输入...",
      achievementmd: "请输入...",
      Form: {
        name: "",
        photo: "",
        identity: "",
        title: "",
        order: "",
        yjfx: "",
        phone: "",
        email: "",
        address: ""
      },
      Form2: {
        id: "",
        name: "",
        photo: "",
        identity: "",
        title: "",
        order: "",
        yjfx: "",
        phone: "",
        email: "",
        address: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入成员姓名", trigger: "blur" }
        ],
        identity: [
          { required: true, message: "请选择成员身份", trigger: "change" }
        ],
        yjfx: [
          { required: true, message: "请填写研究方向", trigger: "blur" }
        ],
        order: [
          { required: true, message: "请填写成员顺序", trigger: "blur" },
          { validator: checkNumber, trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请填写电话", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请填写邮箱", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请填写地址", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    // 前往个人主页弹窗
    open () {
      this.$confirm("提交成功, 是否继续编辑该成员个人主页信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$router.push({name: "pPage",
          params: {id: this.memberid,
            name: this.membername,
            introducemd: this.introducemd,
            achievementmd: this.achievementmd,
            kycgmd: this.kycgmd,
            kyxmmd: this.kyxmmd}})
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消"
        })
      })
    },
    // 上传照片
    handleChange (file, fileList) {
      this.noneBtnImg = fileList.length >= this.limitCountImg
    },
    handleRemove (file, fileList) {
      this.hideUpload = fileList.length >= this.limitCount
      console.log(file)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      console.log(file)
    },
    onchange (file, fileList) {
      console.log(file)
      this.formData = new FormData()
      this.hideUpload = fileList.length >= this.limitCount
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1)

      const whiteList = ["jpg", "jpeg", "png", "JPG", "JPEG", "PNG"]

      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$message.error("上传文件只能是 jpg,jpeg,png格式")
        this.$refs.photo.clearFiles()
        this.hideUpload = false
      } else {
        this.uploadImgToBase64(file.raw).then(data => {
          this.formData.append("photo", data.result)
          this.formData.append("photoname", file.name)
        })
      }

      // this.formData.append("photo", file)

      // const isLt2M = file.size / 1024 / 1024 < 2
      // if (isLt2M) {
      // uploadImgToBase64()返回一个Promise对象，通过.then()获取其数据。其中data.result是图片转成的base64值

      // } else {
      //  this.$message.error("上传封面图片大小不能超过 2MB!")
      // }

      // this.coverPic = file.url
      // this.Visible = true

      // this.imgList = []
    },
    uploadImgToBase64 (file) { // 核心方法，将图片转成base64字符串形式
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function () { // 图片转base64完成后返回reader对象
          resolve(reader)
        }
        reader.onerror = reject
      })
    },


    // 新增对话框
    savecreate2 () {
      this.$refs.addform.validate((valid) => {
        if (valid) {
          this.membername = this.Form.name
          this.formData.append("name", this.Form.name)
          this.formData.append("identity", this.Form.identity)
          this.formData.append("title", this.Form.title)
          this.formData.append("yjfx", this.Form.yjfx)
          this.formData.append("order", this.Form.order)
          this.formData.append("phone", this.Form.phone)
          this.formData.append("email", this.Form.email)
          this.formData.append("address", this.Form.address)
          this.$request.addmember(this.formData).then(res => {
            if (res.status === 200) {
              this.memberid = res.data
              this.open()
            } else {
              this.$message({
                message: "添加失败",
                type: "error"
              })
            }

            console.log(this.memberid)
            this.getallmember()
          }).catch(err => { console.log(err) })
          this.dialogFormVisible = false
        } else {
          console.log("error submit!!")
          return false
        }
      })
      // 加跳转
    },
    pushrouter () {
      console.log(this.memberid)
      this.$router.push({name: "pPage",
        params: {id: this.memberid,
          name: this.membername,
          introducemd: this.introducemd,
          achievementmd: this.achievementmd,
          kycgmd: this.kycgmd,
          kyxmmd: this.kyxmmd}})
    },
    pushrouter2 (index, row) {
      this.$router.push({name: "pPage",
        params: {id: row.Id,
          name: row.Name,
          introducemd: row.IntroduceMD,
          achievementmd: row.AchievementMD,
          kycgmd: row.KycgMD,
          kyxmmd: row.KyxmMD}})
    },
    savecreate () { // 弃用
      this.$refs.addform.validate((valid) => {
        if (valid) {
          this.$request.addmember({
            name: this.Form.name,
            identity: this.Form.identity,
            photo: this.Form.photo,
            title: this.Form.title,
            yjfx: this.Form.yjfx,
            order: this.Form.order,
            phone: this.Form.phone,
            email: this.Form.email,
            address: this.Form.address
          }).then(res => {
            if (res.status === 200) {
              this.$message({
                message: "添加成功",
                type: "success"
              })
            } else {
              this.$message({
                message: "添加失败",
                type: "error"
              })
            }
            this.getallmember()
          }).catch(err => { console.log(err) })
          this.dialogFormVisible = false
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    resetAddForm () {
      this.$refs.addform.resetFields()
      this.$refs.photo.clearFiles()
      this.hideUpload = false
    },
    // 修改对话框
    saveedit () {
      this.$refs.editform.validate((valid) => {
        if (valid) {
          this.formData.append("id", this.Form2.id)
          this.formData.append("name", this.Form2.name)
          this.formData.append("identity", this.Form2.identity)
          this.formData.append("title", this.Form2.title)
          this.formData.append("yjfx", this.Form2.yjfx)
          this.formData.append("order", this.Form2.order)
          this.formData.append("phone", this.Form2.phone)
          this.formData.append("email", this.Form2.email)
          this.formData.append("address", this.Form2.address)
          this.$request.updatemember(this.formData).then(res => {
            if (res.status === 200) {
              this.$message({
                message: "修改成功",
                type: "success"
              })
            } else {
              this.$message({
                message: "修改失败",
                type: "error"
              })
            }
            this.getallmember()
          }).catch(err => { console.log(err) })
          this.dialogForm2Visible = false
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    resetEditForm () {
      this.$refs.editform.resetFields()
      this.$refs.photo.clearFiles()
      this.imgList = []
      this.hideUpload = false
    },
    // 成员列表
    getallmember () {
      // let _this = this
      this.$request.getallmember().then(res => {
        this.tableData = res.data
        console.log(res.data)
      }).catch((err) => {
        console.log(err)
      })
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    },
    handleEdit (index, row) {
      console.log(row)
      this.Form2.id = row.Id
      this.Form2.name = row.Name
      this.Form2.identity = row.Identity
      // this.Form2.photo = row.Photo
      // this.imgList.url = row.Photo
      this.imgList.push({url: row.Photo})
      this.testurl = row.Photo
      this.Form2.yjfx = row.Yjfx
      this.Form2.title = row.Title
      this.Form2.order = row.Order
      this.Form2.phone = row.Phone
      this.Form2.email = row.Email
      this.Form2.address = row.Address
      this.hideUpload = true
      this.dialogForm2Visible = true
      console.log(this.imgList)
    },
    handleDelete (index, row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$request.deletemember({id: row.Id
        }).then(res => {
          if (res.status === 200) {
            this.$message({
              message: "删除成功",
              type: "success"
            })
          } else {
            this.$message({
              message: "删除失败",
              type: "error"
            })
          }
          this.getallmember()
        }).catch(err => console.log(err))
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        })
      })
    },
    filterHandler (value, row, column) {
      const property = column["property"]
      return row[property] === value
    },
    formatter (row, column) {
      return row.Yjfx
    },
    filterTag (value, row) {
      return row.Identity === value
    }
  },
  mounted () {
    this.getallmember()
  }
}
</script>

<style >
.btn {
  margin-bottom: 10px;
}
.hide .el-upload--picture-card {
    display: none;
    /* width: 1rem;
    height: 1.35rem;
    overflow:hidden; */
}
.hide .el-upload{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.hide .el-upload:hover{
  border-color: #409eff;
}
.page{
  /* float: center; */
  text-align:center;
  margin:0 auto;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
.photo{
  position: absolute;
  right:2.5rem;
  /* width: 1rem;
  height: 1.35rem; */
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
}
.baseTheme .el-upload--picture-card {

  background-position-x: center;
  background-position-y: center;
  background-size: 100% 100%;
  width: 190px;
  height: 150px;
}
.baseTheme .el-upload-list--picture-card .el-upload-list__item {
  width: 190px;
  height: 150px;
  position: inherit;

}
.baseTheme .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 190px;
  height: 150px;
}
</style>
